
.scroll{
    height: 100vh;
}
.container{
    background: $green;
    margin-bottom: 140rpx;
}
.head{
    position: relative;
    z-index: 1;
    @include padding-box(30rpx 20rpx 140rpx 20rpx);
    color: #ffffff;
    overflow: hidden;
    position: relative;
}
.receive-list{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: absolute;
    left: -20rpx;
    top: 30rpx;
}
.swiper{
    height: 50rpx;
}
.receive-i{
    align-items: center;
    border-radius: 29rpx;
    background: #00B566;
    display: inline-flex;
    margin-right: 30rpx;
    flex: none;
    width: 317rpx !important;
    @include padding-box(9rpx 36rpx 9rpx 9rpx);
    .portrait{
        margin-right: 8rpx;
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
    }
    .num{
        color: rgba(255, 199, 104, 1);
    }
}
.box-process{
    width: 710rpx;
    height: 170rpx;
    background: #00A85F;
    border-radius: 16rpx;
    @include padding-box(30rpx 20rpx);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 755rpx;
    .process-i{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 500;
        font-size: $font-small;
    }
    .process-img{
        margin-bottom: 26rpx;
        width: 46rpx;
        height: 46rpx;
    }
    .process-next{
        width: 20rpx;
        height: 20rpx;
    }
}
.box-customer{
    @include padding-box(0 30rpx 30rpx 30rpx);
    margin: 24rpx 0;
    background: linear-gradient(180deg, #F3FFF3 0%, #DCFFDE 100%);
    border-radius: 16rpx;
}
.customer-title{
    width: 301rpx;
    height: 66rpx;
    text-align: center;
    background: linear-gradient(180deg, #FDE9CE 0%, #FFCA8A 19%, #FFAB45 100%);
    border-radius: 0px 0px 16rpx 16rpx;
    margin: 0 auto;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 66rpx;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}
.customer-i{
    border-bottom: 1rpx solid #DBF2E7;
    @include padding-box(30rpx 0);
    
}
.corporate{
    @include space-between;
    .name{
        color: $blackish-green;
        font-size: $font-small;
        font-weight: 500;
    }
    .state{
        font-weight: bold;
        color: $blackish-green;
        font-size: $font-small;
    }
    .color-grey{
        color: #A6A8AF;
    }
    .color-red{
        color: #EF0000;
    }
    .color-green{
        color: $green;
    }
}
.corporate-info{
    @include space-between;
    margin-top: 9rpx;
    .name{
        color: #727471;
        font-size: $font-mini;
    }
    .result{
        color: #EF0000;
        font-size: $font-mini;
    }
    .color-grey{
        color: #A6A8AF;
    }
    .color-red{
        color: #EF0000;
    }
    .color-green{
        color: $green;
    }
}
.rule{
    margin-top: 40rpx;
}
.rule-tabs{
    width: 710rpx;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 16rpx 16rpx 0 0;
    background: #00AD62;
    .tabs-i{
        line-height: 80rpx;
        color: #FFFFFF;
        font-size: 32rpx;
        margin: 0 auto;
    }
    .tabs-i-active{
        width: 385rpx;
        height: 113rpx;
        background: #FFFFFF;
        color: $green;
        font-size: 32rpx;
        font-weight: 600;
        text-align: center;
        line-height: 113rpx;
        border-radius: 16rpx 68rpx 0px 0px;
        clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%);
    }
    .tabs-i-prize{
        width: 355rpx;
        height: 113rpx;
        clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
        background: #FFFFFF;
        color: $green;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 113rpx;
        border-radius: 68rpx 16rpx 0px 0px;
        text-align: center;
    }
}
.rule-content{
    width: 710rpx;
    background: #FFFFFF;
    border-radius: 0 0 16rpx 16rpx;
    @include padding-box(26rpx 46rpx 60rpx 30rpx);
}

.rule-content-i{
    display: flex;
    align-items: flex-start;
    margin-top: 34rpx;
    .ranking{
        width: 40rpx;
        height: 40rpx;
        background: #FFAB46;
        border-radius: 50%;
        text-align: center;
        line-height: 40rpx;
        flex: none;
    }
    .text-message{
        color: #202536;
        margin-left: 10rpx;
        font-size: 25rpx;
        line-height: 36rpx;
    }
    .text-message-active{
        margin: 0 auto;
    }
    .color-gold{
        color: #FFAB46;
        font-weight: Bold;
    }
    .color-black{
        font-weight: Bold;
        color: #202536;
    }
}
.foot {
    width: 100vw;
    height: 140rpx;
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.foot .long-btn {
    margin-top: 3vw;
}
.long-btn{
    background: linear-gradient(240deg, #FF9936 0%, #FFCB81 100%) !important;
}
